{#{% extends 'RangePicker.html' %}#}

<!DOCTYPE html>
{% load static %}
<html>
<head>

	<title>即住</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/rollpic.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
 	<link rel="stylesheet" href="/static/css/daterangepicker.css">
    <link rel="stylesheet" href="/static/css/cityselect.css">
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/cityselect.css">
    <script type="text/javascript" src="/static/js/cityselect.js"></script>

<style type="text/css">
.demo{width:220px;margin:20px auto;}
</style>
    {% if msg %}
	<script>
		$(function () {
			alert("{{ msg }}")
		})
	</script>
{% endif %}
<script>
        function gicities() {
    cityname=$("#citySelect")[0].value;
    window.location.href="/houses/"+cityname+"/";
}
</script>

</head>
<body>
<div class="main_title">
    <div class="sys_banner">
        <ol>
            <li><a href="#">故事</a></li>
            <li><a href="#">帮助</a></li>
            {% if myuser %}
				<li><a href="/userorder/">{{ myuser.username }}</a></li>
				<li><a href="/logout/">注销</a> </li>
            {% else %}
				<li><a href="/register/">注册</a></li>
				<li><a href="/login">登录</a></li>
			{% endif %}
        </ol>
</div>
<div class="webtitle">
    <div class="sign">即&nbsp;&nbsp;&nbsp;住</div>
    <div class="slogan">即刻 · 即住  &nbsp;&nbsp;&nbsp;   租房 · 出租  </div>
</div>
</div>
<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators" style="margin-left: -1%">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src='/static/img/1.jpg' alt="First slide">
		</div>
		<div class="item">
			<img src='/static/img/2.jpg' alt="Second slide">
		</div>
		<div class="item">
			<img src='/static/img/4.jpg' alt="Third slide">
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>
<div class="search">

   <div class="search_nation">即刻搜索</div>
{#    <div class="search_column_1">选择城市</div>#}

    <div>
	<!-- 在输入框加入id -->
	<input type="text" style="border-style: none;font-size: 20px;margin-bottom: 0px" class="search_column_1" id="citySelect" placeholder="请输入目的地">
    </div>

<!-- 实例化 -->
<script type="text/javascript">
var test=new Vcity.CitySelector({input:'citySelect'});
</script>

{#    <div class="search_column_2">选择时长</div>#}
     <div>
            	<input type="text"  class="search_column_2"  value="选择日期" name="date2" id="date2" style="font-size: 17px;border-style: none;margin-bottom: 10px">
            	 <input type="hidden" style="border-style: none" id = "startTime" name="startTime" class="form-control" />
            	 <input type="hidden" style="border-style: none" id = "endTime" name="endTime" class="form-control" />
            </div>
    <input class="btn_search" type="button" value="搜索即住" onclick="gicities()">
</div>
<div style="height: 10rem"></div>
<div class="popCities_title">热门城市</div>
<div style="height: 5rem"></div>
<div class="popCities" style="overflow: hidden">
{% for info in infos %}
    <div class="{{ info.type }}Show" onclick="cityselect({{ info.name }})"><a href="/houses/{{ info.cityname }}/"><img src="{{ info.imgsrc }}" class="{{ info.type }}Img" ></a><div class="text" style="font-size: 5rem;margin-top: -16rem;color: white;position: absolute;margin-left: {{ info.margin }}%;font-family='汉仪尚巍手书W';">{{ info.name }}</div></div>
{% endfor %}
</div>
<div style="height: 10rem"></div>
<div class="popCities_title">在即住·与故事不期而遇</div>
<div style="height: 5rem"></div>



<div class="container" style="width: 100%">
	<div class="row clearfix">
		<div class="col-md-1 column">
		</div>
		<div class="col-md-10 column">
			<div class="row">
				<div class="col-md-4">
					<div class="thumbnail">
						<img alt="300x200" style="width: 100% ;height: 20rem;" src="/static/img/gz.jpg" />
						<div class="caption">
							<h3 style="text-align: center">
								探索广州
							</h3>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
							<p>
								 <a class="btn btn-primary" href="#" style="width: 100%;background-color: #849494">点击探索</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="thumbnail">
						<img alt="300x200" style="width: 100% ;height: 20rem;" src="/static/img/cq.jpg" />
						<div class="caption">
							<h3 style="text-align: center">
								探索成都
							</h3>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
							<p>
								 <a class="btn btn-primary" href="#" style="width: 100%;background-color: #849494">点击探索</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="thumbnail" >
						<img alt="300x200" style="width: 100% ;height: 20rem;" src="/static/img/tj.jpg" />
						<div class="caption">
							<h3 style="text-align: center">
								 探索重庆
							</h3>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
							<p>
								<a class="btn btn-primary" href="#" style="width: 100%;background-color: #849494">点击探索</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-1 column">
		</div>
	</div>
</div>
<div style="height: 20rem"></div>
<footer>
    <div style="width: 100%;height:40rem;background: #3d423d">
        <div style="height: 4rem"></div>
        <div class="container" style="width: 100%;color: rgb(180,180,180)" >
	<div class="row clearfix">
		<div class="col-md-2 column">
		</div>
		<div class="col-md-2 column">
			<h3>
				h3. 这是一套可视化布局系统.
			</h3>
			<ul>
				<li>
					Lorem ipsum dolor sit amet
				</li>
				<li>
					Consectetur adipiscing elit
				</li>
				<li>
					Integer molestie lorem at massa
				</li>
				<li>
					Facilisis in pretium nisl aliquet
				</li>
				<li>
					Nulla volutpat aliquam velit
				</li>
				<li>
					Faucibus porta lacus fringilla vel
				</li>
				<li>
					Aenean sit amet erat nunc
				</li>
				<li>
					Eget porttitor lorem
				</li>
			</ul>
		</div>
		<div class="col-md-2 column">
			<h3>
				h3. 这是一套可视化布局系统.
			</h3>
			<ul>
				<li>
					Lorem ipsum dolor sit amet
				</li>
				<li>
					Consectetur adipiscing elit
				</li>
				<li>
					Integer molestie lorem at massa
				</li>
				<li>
					Facilisis in pretium nisl aliquet
				</li>
				<li>
					Nulla volutpat aliquam velit
				</li>
				<li>
					Faucibus porta lacus fringilla vel
				</li>
				<li>
					Aenean sit amet erat nunc
				</li>
				<li>
					Eget porttitor lorem
				</li>
			</ul>
		</div>
		<div class="col-md-2 column">
			<h3>
				h3. 这是一套可视化布局系统.
			</h3>
			<ul>
				<li>
					Lorem ipsum dolor sit amet
				</li>
				<li>
					Consectetur adipiscing elit
				</li>
				<li>
					Integer molestie lorem at massa
				</li>
				<li>
					Facilisis in pretium nisl aliquet
				</li>
				<li>
					Nulla volutpat aliquam velit
				</li>
				<li>
					Faucibus porta lacus fringilla vel
				</li>
				<li>
					Aenean sit amet erat nunc
				</li>
				<li>
					Eget porttitor lorem
				</li>
			</ul>
		</div>
		<div class="col-md-2 column">
			<h3>
				h3. 这是一套可视化布局系统.
			</h3>
			<ul>
				<li>
					Lorem ipsum dolor sit amet
				</li>
				<li>
					Consectetur adipiscing elit
				</li>
				<li>
					Integer molestie lorem at massa
				</li>
				<li>
					Facilisis in pretium nisl aliquet
				</li>
				<li>
					Nulla volutpat aliquam velit
				</li>
				<li>
					Faucibus porta lacus fringilla vel
				</li>
				<li>
					Aenean sit amet erat nunc
				</li>
				<li>
					Eget porttitor lorem
				</li>
			</ul>
		</div>
		<div class="col-md-2 column">
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-2 column">
		</div>
		<div class="col-md-8 column">
			<blockquote>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
				</p> <small>Someone famous <cite>Source Title</cite></small>
			</blockquote>
		</div>
		<div class="col-md-2 column">
		</div>
	</div>
</div>
    </div>
</footer>
<div>
{% for info in finalinfo %}
    {{ info.name }}
{% endfor %}
</div>

</body>


    <script src="/static/js/jquery-2.2.3.min.js"></script>
	<script src="/static/js/moment.js"></script>
	<script src="/static/js/daterangepicker.js"></script>
    <script src="/static/js/timeRange.js"></script>
	<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/static/js/cityselect.js"></script>
</html>